// 设置子管理员
<template>
    <div class="sonmanag">
      <div class="install-title">
        <div>
          <div>
            设置子管理员
          </div>
          <!-- <div @click="addClick">
            新增子管理员
          </div> -->
          <el-button type="primary" size="mini" @click="addClick">新增子管理员</el-button>
        </div>
      </div>
      <div class="install-main">
        <div class="sonmanag-main">
          <ul>
            <li class="fisterLi">
              <div>
                成员
              </div>
              <div>
                管理范围
              </div>
              <div>
                权限
              </div>
              <div>
                操作
              </div>
            </li>
            <li class="dataLi" v-for="(item,index) in verLists" :key="item.id">
              <div>
                <!-- {{item.memberNames[0]}} -->
                {{item.memberNames?item.memberNames.toString():""}}
                <!-- {{item.a}} -->
              </div>
              <div>
                {{item.scopeType | manangeFun}}
                <!-- {{item.b}} -->
                <span v-show="item.deptNames" v-for="ite in item.deptNames" :key="ite">{{ite}}&nbsp;</span>
              </div>
              <div class="itemsName">
                <!-- {{item.roleNames[0]}} -->
                <!-- {{item.c}} -->
                <!--  v-if="item.appNames && item.sourceNames" -->
                <!-- <span v-for="items in ((item.appNames).concat((item.sourceNames?item.sourceNames:'')))" class="">{{items}}</span> -->
                <span v-if="item.appNames" v-for="itemss in item.appNames" :key="itemss">{{itemss}}</span>
                <span v-if="item.sourceNames" v-for="items in item.sourceNames" :key="items">{{items}}</span>
              </div>
              <div class="dataLi-op">
                <div @click="updateClick(index)">
                  <img src="/static/img/编辑.png" alt="">
                </div>
                <div @click="deleteClick(index)">
                  <img src="/static/img/删除.png" alt="">
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <v-infoDel :deleteBoxShow="deleteBoxShow" :delTostVal="delTostVal" @canfirm="delClick" @cancel="cancleClick"></v-infoDel>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import infoDel from "../../cModel/infoDel";
export default {
  components: {
    "v-infoDel": infoDel
  },
  data() {
    return {
      deleteBoxShow: false, //删除框是否显示
      delTostVal: "",
      delClickTrueOrFalse: true, //删除点一次
      idVal: "",
      verLists: [] // 列表
    };
  },
  filters: {
    manangeFun: function(val) {
      if (val == "ALL") {
        return "全公司";
      }
      if (val == "CURRENT") {
        return "所在部门以及下级部门";
      }
    }
  },
  created: function() {
    var self = this;
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      this.listFun();
    }
  },
  watch: {},
  methods: {
    //初始化数据
    listFun() {
      var self = this;
      self
        .getapiorgsettinglist({
          orgId: sessionStorage.getItem("ORGID")
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.verLists = data.data;
            }
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    //删除框取消
    cancleClick() {
      this.deleteBoxShow = false;
    },
    // 点击新增
    addClick() {
      // opSonmanag
      this.$router.push({
        path: "/home/install/addSonmanag"
      });
    },
    // 点击修改
    updateClick(index) {
      var self = this;
      self.$router.push({
        path: "/home/install/opSonmanag",
        query: {
          id: self.verLists[index].id
        }
      });
    },
    //删除
    deleteClick(index) {
      var self = this;
      self.delTostVal = "确定要删除该子管理员吗？";
      self.deleteBoxShow = true;
      self.idVal = self.verLists[index].id;
    },
    //确定删除
    delClick() {
      var self = this;
      if (self.delClickTrueOrFalse == true) {
        self.delClickTrueOrFalse = false;
        self
          .getapiorgsettingdelete({
            id: self.idVal
          })
          .then(data => {
            self.delClickTrueOrFalse = true;
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "删除成功"
              });
              self.deleteBoxShow = false;
              self.listFun();
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.delClickTrueOrFalse = true;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    ...mapActions(["getapiorgsettinglist", "getapiorgsettingdelete"])
  }
};
</script>
<style scoped>
.fisterLi {
  display: flex;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.dataLi {
  display: flex;
  min-height: 50px;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
/* .dataLi > div {
  border-left: 1px solid #ccc;
} */
.fisterLi > div {
  text-align: center;
  /* border-left: 1px solid #ccc; */
}
.dataLi > div {
  width: 25%;
}
.itemsName {
  padding: 10px;
}
.fisterLi > div:nth-child(1),
.dataLi > div:nth-child(1) {
  width: 25%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  word-wrap: break-word;
  word-break: break-all;
}
.fisterLi > div:nth-child(2),
.dataLi > div:nth-child(2) {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  word-wrap: break-word;
  word-break: break-all;
}
.fisterLi > div:nth-child(3),
.dataLi > div:nth-child(3) {
  width: 25%;
  /* display: flex;
  align-items: center;
  justify-content: center;
  word-wrap: break-word;
  word-break: break-all; */
}
.fisterLi > div:nth-child(4),
.dataLi > div:nth-child(4) {
  width: 25%;
}
.dataLi-op {
  display: flex;
  align-items: center;
  width: 25%;
  justify-content: space-around;
}
.dataLi-op > div {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.dataLi-op > div img {
  width: 20px;
  height: 20px;
}
.sonmanag-main {
  width: 91%;
  min-height: 80px;
  /* border: 1px solid #ccc; */
  margin-bottom: 40px;
}
.install-main {
  min-height: 80px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.install-title {
  height: 80px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.install-title > div {
  width: 91%;
  background-color: rgba(56, 173, 255, 0.2);
  height: 40px;
  line-height: 40px;
  font-size: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.install-title > div > div:nth-child(1) {
  padding-left: 15px;
  color: #000;
}

.install-title .el-button {
  margin-right: 15px;
}

.sonmanag {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  min-height: 400px;
}

.itemsName span {
  float: left;
  margin: 5px;
  border: 1px solid #38adff;
  color: #38adff;
  font-size: 12px;
  margin-left: 2px;
  border-radius: 10px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 3px;
  padding-bottom: 3px;
}
</style>